<!DOCTYPE html>
<html>
<head>
    <title>Wave Interference Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="250"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    const color = '#333';
    const pointRadius = 4.5;
    const lineWidth = 1.5;
    const labelFont = "italic 24px 'Times New Roman'";
    const dimensionFont = "italic 30px 'Times New Roman'";

    // Coordinates
    const y_line = 100;
    const p_x = 100;
    const q_x = 300;
    const r_x = 450;

    ctx.strokeStyle = color;
    ctx.fillStyle = color;

    // Draw main horizontal line
    ctx.beginPath();
    ctx.moveTo(50, y_line);
    ctx.lineTo(500, y_line);
    ctx.lineWidth = lineWidth;
    ctx.stroke();

    // Function to draw a labeled point
    function drawLabeledPoint(x, y, label) {
        // Draw point (filled circle)
        ctx.beginPath();
        ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Draw label
        ctx.font = labelFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText(label, x, y - 10);
    }

    // Draw points P, Q, R
    drawLabeledPoint(p_x, y_line, 'P');
    drawLabeledPoint(q_x, y_line, 'Q');
    drawLabeledPoint(r_x, y_line, 'R');

    // --- Draw Dimension Line for PQ ---

    const dim_y_start = y_line;
    const dim_y_end = y_line + 75;
    const dim_line_y = y_line + 60; // Y position of the horizontal dimension line

    ctx.lineWidth = 1;

    // Vertical extension lines from P and Q
    ctx.beginPath();
    ctx.moveTo(p_x, dim_y_start);
    ctx.lineTo(p_x, dim_y_end);
    ctx.moveTo(q_x, dim_y_start);
    ctx.lineTo(q_x, dim_y_end);
    ctx.stroke();

    // Horizontal dimension line
    ctx.beginPath();
    ctx.moveTo(p_x, dim_line_y);
    ctx.lineTo(q_x, dim_line_y);
    ctx.stroke();
    
    // Arrowheads for the dimension line
    const arrowHeadLength = 10;
    const arrowHeadHeight = 4;
    
    // Left arrowhead (points left, towards the vertical extension line from P)
    ctx.beginPath();
    ctx.moveTo(p_x, dim_line_y);
    ctx.lineTo(p_x + arrowHeadLength, dim_line_y - arrowHeadHeight);
    ctx.lineTo(p_x + arrowHeadLength, dim_line_y + arrowHeadHeight);
    ctx.closePath();
    ctx.fill();

    // Right arrowhead (points right, towards the vertical extension line from Q)
    ctx.beginPath();
    ctx.moveTo(q_x, dim_line_y);
    ctx.lineTo(q_x - arrowHeadLength, dim_line_y - arrowHeadHeight);
    ctx.lineTo(q_x - arrowHeadLength, dim_line_y + arrowHeadHeight);
    ctx.closePath();
    ctx.fill();

    // --- Draw the Label "3/2 λ" ---
    
    const label_center_x = (p_x + q_x) / 2;
    // Position the label vertically between the main line and the dimension line
    const label_center_y = (y_line + dim_line_y) / 2;

    ctx.font = dimensionFont;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    const frac_x = label_center_x - 12;
    const lambda_x = label_center_x + 20;
    const num_y = label_center_y - 12;
    const den_y = label_center_y + 12;
    const bar_y = label_center_y;

    // "3"
    ctx.fillText('3', frac_x, num_y);

    // "2"
    ctx.fillText('2', frac_x, den_y);
    
    // Fraction bar (slightly slanted, as in the original)
    ctx.beginPath();
    ctx.moveTo(frac_x - 15, bar_y - 2);
    ctx.lineTo(frac_x + 15, bar_y + 2);
    ctx.lineWidth = 1.5;
    ctx.stroke();

    // "λ" (lambda)
    ctx.fillText('λ', lambda_x, bar_y);

</script>
</body>
</html>